<template>
	<view class="h-full">
		<view class="boxSty">
			<!-- <div style="height: 50rpx;"></div> -->
			<div class="back center" @click="back">
				<image src="../../../../static/icon/back.png" mode="" class="w-20 h-30"></image>
			</div>
		</view>
		<view class="w-full imgBoxSty" style="z-index: 5;">
			<image :src="getImageUrl(allInfo.logo)" mode="aspectFill" style="height: 600rpx;"></image>
		</view>
		<view class=" bg-white pl-34 pr-34" style="border-radius: 0 0 26rpx 26rpx;">
			<view class="between">
				<p class="numberSty">{{allInfo.score}}<span class="fz26">{{$t('积分兑换')}}</span></p>
				<p class="fz26 text-666 mt-50"> {{ $t('库存') }} {{ allInfo.inventory }}{{$t('台')}}</p>
			</view>
			<p class="mt-30 text-333 fz30">{{ allInfo[plang('name')] }}</p>
			
			<view v-if="allInfo.is_express_price == '1'" class="transformSty pb-35">
				{{$t('含运费')}}
			</view>
			<view v-else class="transformSty pb-35">
				{{$t('不含运费')}}   
			</view>
			<p class="h-35"></p>
		</view> 
		<view class="bg-white w-full mt-16" style="border-radius: 26rpx 26rpx 0 0 ;">
			<p class="fz36 text-010 pt-34 ml-34">{{$t('商品详情')}}</p>
			<p class="fz26 text-333 ml-34 mr-34 mt-22 mb-20 pb-30">{{ allInfo[plang('content')] }}</p>
			<view class="" v-for="item in (allInfo.images && allInfo.images.split(','))">
				<image :src="getImageUrl(item)" mode="widthFix" style="display: block;" class="w-full"></image>
			</view>
		</view>
		<view class="h-200"></view>
		<view class="footer_btn4">
			<view v-if="productFlag" class="btn_blue" @click="showUserInfo = true">
				{{ allInfo.score }}{{$t('积分兑换此商品')}}
			</view>
			<view v-else class="btn_drak" @click="">
				{{$t('已售罄')}}
			</view>
		</view>
		<u-popup v-model="showUserInfo"  mode="bottom" border-radius="14" length="75%">
			<formPage :allInfo="allInfo" @close-upop="closeUpop"></formPage>
		</u-popup>
	</view>
</template>

<script>
	import { scoreExchange, getUserHomepage } from '@/api/user'
	import formPage from './formPage.vue'
	export default {
		components: {
			formPage
		},
		data() {
			return {
				productFlag: true,
				showUserInfo: false,
				IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
				allInfo:{},
			}
		},
		onLoad(options) {
			this.allInfo = uni.getStorageSync('mallDetail')
			// this.allInfo = JSON.parse(options.item)
			console.log('88999', this.allInfo)
			window.onNativeHide  =()=>{
				uni.removeStorageSync("allinfo")
			}
		  },
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		
		methods: {
			back() {
				uni.navigateBack()
			},
			closeUpop(value) {
				console.log('value-----', value)
				this.showUserInfo = value
			}
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	page {
		background-color: #F6F7FB;
	}
	.back {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 50rpx;
	}
	.titleSty {
		color: #262728;
		font-family: "PingFang SC";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 600;
		// padding-top: 34rpx;
		margin-left: 14rpx;
	}
	/deep/ .uni-image {
		width: 100%;
		height: 100%;
	}
	.formSty {
		padding-bottom: 150rpx;
		/deep/ .u-form-item__body {
			padding: 0;
			border: none !important;
		}
		/deep/ .u-radio__label {
			font-size: 20rpx;
			color:#666;
		}
	}
	.contentBg {
		background-color: #fff;
		padding: 0 24rpx;
		// margin-left: 24rpx;
		// margin-right: 24rpx;
		border-radius: 18px;
		padding-bottom: 35rpx;
		/deep/ .u-form-item__body__right__message {
			margin-left: 0 !important;
		}
		/deep/ .u-icon__icon {
			font-size: 28rpx !important;
		}
		/deep/ .u-border-bottom{
			position: inherit;
		}
		/deep/.u-radio {
			// width: 26rpx !important;
			// height: 26rpx !important;
		}
		/deep/ .u-add-wrap {
			// display: none !important;
			color: #D9D9D9;
			font-size: 20rpx;
		}
		/deep/ .u-add-tips {
			display: none !important;
		}
	}
	.boxSty {
		position: relative;
		z-index: 10;
		// width: 100%;
		// height: 750rpx;
		// background-image: url('../../../../static/images/user/newUI/productInfo.png');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}
	.imgBoxSty {
		// display: flex; /* 启用flex布局 */
		// justify-content: center; /* 水平居中 */
		// align-items: center; /* 垂直居中 */
		image {
			// flex-grow: 1; /* 图片自适应容器大小 */
			width: 100%; /* 最大宽度为容器宽度 */
			// height: auto; /* 高度自动调整 */
		}
	}
	.numberSty {
		color: #FF5A00;
		font-size: 48rpx;
		font-weight: 600;
		margin-top: 34rpx;
	}
	.transformSty {
		height: 46rpx;
		background-color: #F1F6FF;
		text-align: center;
		font-size: 26rpx;
		line-height: 46rpx;
		color: #7A929B;
		margin-top: 24rpx;
		padding: 0 28rpx;
		display: inline-block;

	}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_drak {
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 500px;
			border: 2rpx solid rgba(3, 189, 130, 0.10);
			background: #E8E8E8;
			color: #333333;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
	}
	.heightSty {
		height: auto;
	}
</style>
